import React, { useEffect } from 'react'
import { Button, Checkbox, Form, Input ,Card, message} from 'antd';
import style from '../index.module.css'
import { addHospitalRequest ,getHosSetFromIdRequest,updateHosSetFromIdRequest} from '@/api/hospital/hospitalSet';
import type { addHospitalParamType } from '@/api/hospital/model/hospitalSetTypes';
import { useNavigate, useParams } from 'react-router-dom';
export default function AddOrUpdateHosSet() {
    const navigate=useNavigate();

    //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
    const [form]=Form.useForm()

    const {id}=useParams();
    // console.log(id,'iddddd');
    
    useEffect(()=>{
       if(id){
        const getHosDetail=async()=>{
            const result=await getHosSetFromIdRequest(id);
            console.log(result,'result');
            
            //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
            form.setFieldsValue(result)
        }
        getHosDetail();
       }
    })

    // 1.新增医院事件回调函数
    const addHosFinshHandle=async(fieldValue:addHospitalParamType)=>{
        if(id){
            // 提交修改请求
            updateHosSetFromIdRequest({...fieldValue,id})
            navigate( "/syt/hospital/hospitalSet")
            message.success('修改数据成功')
        }else{
            // 发送新增请求
        await addHospitalRequest(fieldValue)
        // 新增成功后返回医院设置页面
        navigate( "/syt/hospital/hospitalSet")
        message.success('新增数据成功')
        }
    }

    // 2.点击返回事件回调函数
    const goBackHandle=()=>{
        navigate(-1)
    }
  return (
    <div>
        <Card>
         <Form
      form={form}   
      name="basic"
      labelCol={{ span: 3 }}
      wrapperCol={{ span: 18}}
      onFinish={addHosFinshHandle}
      
    >
      <Form.Item
        label="医院名称"
        name="hosname"
       rules={[{
        required:true,
        message:'请输入医院名称',
        transform(value){
          return value.trim()
        }
       }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="医院编号"
        name="hoscode"
        rules={[{ required: true, message: '请输入医院编号' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="api基础路径"
        name="apiUrl"
        rules={[{ required: true, message: '请输入api基础路径' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="联系人姓名"
        name="contactsName"
        rules={[{ required: true, message: '请输入联系人姓名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="联系人手机"
        name="contactsPhone"
        rules={[{ required: true, message: '请输入联系人手机' }]}
      >
        <Input />
      </Form.Item>

      

      <Form.Item wrapperCol={{ offset:3}}>
        <Button type="primary" htmlType="submit" className={style.mr}> 
          提交
        </Button>
        <Button onClick={goBackHandle} type="default" htmlType="button">
          返回
        </Button>
      </Form.Item>
    </Form>
    </Card>
    </div>
  )
}
